<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育馆器材管理系统</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            margin: 0;
            height: 100vh;
        }

        /* 顶部导航栏样式 */
        #header {
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }

        /* 侧边栏和内容区域容器样式 */
        #main-container {
            display: flex;
            flex: 1;
        }

        /* 侧边栏样式 */
        #sidebar {
            width: 200px;
            background-color: #34495e;
            padding: 20px;
            box-sizing: border-box;
        }

        #sidebar ul {
            list-style-type: none;
            padding: 0;
        }

        #sidebar li {
            margin-bottom: 10px;
        }

        #sidebar a {
            text-decoration: none;
            color: white;
            padding: 10px;
            display: block;
            border-radius: 5px;
        }

        #sidebar a:hover {
            background-color: #2c3e50;
        }

        /* 内容区域样式 */
        #content {
            flex: 1;
            padding: 20px;
            background-color: #ecf0f1;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #bdc3c7;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #dfe6e9;
        }

        form {
            margin-top: 20px;
        }

        input[type="text"],
        input[type="number"] {
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #bdc3c7;
            border-radius: 5px;
        }

        button {
            padding: 10px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #2980b9;
        }

        #chart {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div id="header">体育馆器材管理系统</div>
    <!-- 侧边栏和内容区域容器 -->
    <div id="main-container">
        <div id="sidebar">
            <ul>
                <li><a href="#" onclick="showPage('home')">首页</a></li>
                <li><a href="#" onclick="showPage('equipment')">器材信息管理</a></li>
                <li><a href="#" onclick="showPage('borrow')">器材借用管理</a></li>
                <li><a href="#" onclick="showPage('maintenance')">器材维护管理</a></li>
                <li><a href="#" onclick="showPage('inventory')">器材库存管理</a></li>
            </ul>
        </div>
        <div id="content">
            <!-- 首页 -->
            <div id="home" style="display: none;">
                <h2>首页</h2>
                <div id="chart"></div>
            </div>
            <!-- 器材信息管理 -->
            <div id="equipment" style="display: none;">
                <h2>器材信息管理</h2>
                <form id="equipmentForm">
                    <input type="text" id="equipmentName" placeholder="器材名称">
                    <input type="number" id="equipmentPrice" placeholder="器材价格">
                    <button type="button" onclick="addEquipment()">添加</button>
                </form>
                <table id="equipmentTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>器材名称</th>
                            <th>器材价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- 器材借用管理 -->
            <div id="borrow" style="display: none;">
                <h2>器材借用管理</h2>
                <form id="borrowForm">
                    <input type="text" id="borrowerName" placeholder="借用人姓名">
                    <input type="text" id="borrowedEquipment" placeholder="借用器材名称">
                    <button type="button" onclick="addBorrow()">添加</button>
                </form>
                <table id="borrowTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>借用人姓名</th>
                            <th>借用器材名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- 器材维护管理 -->
            <div id="maintenance" style="display: none;">
                <h2>器材维护管理</h2>
                <form id="maintenanceForm">
                    <input type="text" id="maintenanceEquipment" placeholder="维护器材名称">
                    <input type="text" id="maintenanceDate" placeholder="维护日期">
                    <button type="button" onclick="addMaintenance()">添加</button>
                </form>
                <table id="maintenanceTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>维护器材名称</th>
                            <th>维护日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- 器材库存管理 -->
            <div id="inventory" style="display: none;">
                <h2>器材库存管理</h2>
                <form id="inventoryForm">
                    <input type="text" id="inventoryEquipment" placeholder="器材名称">
                    <input type="number" id="inventoryQuantity" placeholder="库存数量">
                    <button type="button" onclick="addInventory()">添加</button>
                </form>
                <table id="inventoryTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>器材名称</th>
                            <th>库存数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        // 初始化数据
        let equipmentData = JSON.parse(localStorage.getItem('equipmentData')) || [
            { id: 1, name: '哑铃', price: 50 },
            { id: 2, name: '杠铃', price: 100 },
            { id: 3, name: '跑步机', price: 2000 },
            { id: 4, name: '动感单车', price: 1500 },
            { id: 5, name: '仰卧起坐板', price: 80 },
            { id: 6, name: '健身球', price: 30 },
            { id: 7, name: '瑜伽垫', price: 20 },
            { id: 8, name: '拉力器', price: 40 },
            { id: 9, name: '臂力器', price: 35 },
            { id: 10, name: '划船机', price: 1200 }
        ];
        let borrowData = JSON.parse(localStorage.getItem('borrowData')) || [
            { id: 1, borrower: '张三', equipment: '哑铃' },
            { id: 2, borrower: '李四', equipment: '杠铃' },
            { id: 3, borrower: '王五', equipment: '跑步机' },
            { id: 4, borrower: '赵六', equipment: '动感单车' },
            { id: 5, borrower: '孙七', equipment: '仰卧起坐板' },
            { id: 6, borrower: '周八', equipment: '健身球' },
            { id: 7, borrower: '吴九', equipment: '瑜伽垫' },
            { id: 8, borrower: '郑十', equipment: '拉力器' },
            { id: 9, borrower: '王十一', equipment: '臂力器' },
            { id: 10, borrower: '李十二', equipment: '划船机' }
        ];
        let maintenanceData = JSON.parse(localStorage.getItem('maintenanceData')) || [
            { id: 1, equipment: '哑铃', date: '2025-01-01' },
            { id: 2, equipment: '杠铃', date: '2025-01-02' },
            { id: 3, equipment: '跑步机', date: '2025-01-03' },
            { id: 4, equipment: '动感单车', date: '2025-01-04' },
            { id: 5, equipment: '仰卧起坐板', date: '2025-01-05' },
            { id: 6, equipment: '健身球', date: '2025-01-06' },
            { id: 7, equipment: '瑜伽垫', date: '2025-01-07' },
            { id: 8, equipment: '拉力器', date: '2025-01-08' },
            { id: 9, equipment: '臂力器', date: '2025-01-09' },
            { id: 10, equipment: '划船机', date: '2025-01-10' }
        ];
        let inventoryData = JSON.parse(localStorage.getItem('inventoryData')) || [
            { id: 1, equipment: '哑铃', quantity: 20 },
            { id: 2, equipment: '杠铃', quantity: 15 },
            { id: 3, equipment: '跑步机', quantity: 5 },
            { id: 4, equipment: '动感单车', quantity: 8 },
            { id: 5, equipment: '仰卧起坐板', quantity: 12 },
            { id: 6, equipment: '健身球', quantity: 30 },
            { id: 7, equipment: '瑜伽垫', quantity: 25 },
            { id: 8, equipment: '拉力器', quantity: 18 },
            { id: 9, equipment: '臂力器', quantity: 22 },
            { id: 10, equipment: '划船机', quantity: 6 }
        ];

        // 显示页面
        function showPage(pageId) {
            const pages = ['home', 'equipment', 'borrow', 'maintenance', 'inventory'];
            pages.forEach(page => {
                const element = document.getElementById(page);
                if (page === pageId) {
                    element.style.display = 'block';
                } else {
                    element.style.display = 'none';
                }
            });
            if (pageId === 'home') {
                drawChart();
            } else if (pageId === 'equipment') {
                renderTable('equipmentTable', equipmentData, ['id', 'name', 'price'], 'equipment');
            } else if (pageId === 'borrow') {
                renderTable('borrowTable', borrowData, ['id', 'borrower', 'equipment'], 'borrow');
            } else if (pageId === 'maintenance') {
                renderTable('maintenanceTable', maintenanceData, ['id', 'equipment', 'date'], 'maintenance');
            } else if (pageId === 'inventory') {
                renderTable('inventoryTable', inventoryData, ['id', 'equipment', 'quantity'], 'inventory');
            }
        }

        // 渲染表格
        function renderTable(tableId, data, columns, type) {
            const table = document.getElementById(tableId);
            const tbody = table.getElementsByTagName('tbody')[0];
            tbody.innerHTML = '';
            data.forEach(item => {
                const row = tbody.insertRow();
                columns.forEach(column => {
                    const cell = row.insertCell();
                    cell.textContent = item[column];
                });
                const actionCell = row.insertCell();
                const editButton = document.createElement('button');
                editButton.textContent = '编辑';
                editButton.onclick = () => editItem(item.id, type);
                actionCell.appendChild(editButton);
                const deleteButton = document.createElement('button');
                deleteButton.textContent = '删除';
                deleteButton.onclick = () => deleteItem(item.id, type);
                actionCell.appendChild(deleteButton);
            });
        }

        // 添加器材信息
        function addEquipment() {
            const name = document.getElementById('equipmentName').value;
            const price = parseInt(document.getElementById('equipmentPrice').value);
            if (name && price) {
                const newId = equipmentData.length > 0 ? equipmentData[equipmentData.length - 1].id + 1 : 1;
                equipmentData.push({ id: newId, name, price });
                localStorage.setItem('equipmentData', JSON.stringify(equipmentData));
                renderTable('equipmentTable', equipmentData, ['id', 'name', 'price'], 'equipment');
                document.getElementById('equipmentName').value = '';
                document.getElementById('equipmentPrice').value = '';
            }
        }

        // 添加器材借用信息
        function addBorrow() {
            const borrower = document.getElementById('borrowerName').value;
            const equipment = document.getElementById('borrowedEquipment').value;
            if (borrower && equipment) {
                const newId = borrowData.length > 0 ? borrowData[borrowData.length - 1].id + 1 : 1;
                borrowData.push({ id: newId, borrower, equipment });
                localStorage.setItem('borrowData', JSON.stringify(borrowData));
                renderTable('borrowTable', borrowData, ['id', 'borrower', 'equipment'], 'borrow');
                document.getElementById('borrowerName').value = '';
                document.getElementById('borrowedEquipment').value = '';
            }
        }

        // 添加器材维护信息
        function addMaintenance() {
            const equipment = document.getElementById('maintenanceEquipment').value;
            const date = document.getElementById('maintenanceDate').value;
            if (equipment && date) {
                const newId = maintenanceData.length > 0 ? maintenanceData[maintenanceData.length - 1].id + 1 : 1;
                maintenanceData.push({ id: newId, equipment, date });
                localStorage.setItem('maintenanceData', JSON.stringify(maintenanceData));
                renderTable('maintenanceTable', maintenanceData, ['id', 'equipment', 'date'], 'maintenance');
                document.getElementById('maintenanceEquipment').value = '';
                document.getElementById('maintenanceDate').value = '';
            }
        }

        // 添加器材库存信息
        function addInventory() {
            const equipment = document.getElementById('inventoryEquipment').value;
            const quantity = parseInt(document.getElementById('inventoryQuantity').value);
            if (equipment && quantity) {
                const newId = inventoryData.length > 0 ? inventoryData[inventoryData.length - 1].id + 1 : 1;
                inventoryData.push({ id: newId, equipment, quantity });
                localStorage.setItem('inventoryData', JSON.stringify(inventoryData));
                renderTable('inventoryTable', inventoryData, ['id', 'equipment', 'quantity'], 'inventory');
                document.getElementById('inventoryEquipment').value = '';
                document.getElementById('inventoryQuantity').value = '';
            }
        }

        // 编辑项目
        function editItem(id, type) {
            let data;
            let form;
            if (type === 'equipment') {
                data = equipmentData;
                form = document.getElementById('equipmentForm');
            } else if (type === 'borrow') {
                data = borrowData;
                form = document.getElementById('borrowForm');
            } else if (type === 'maintenance') {
                data = maintenanceData;
                form = document.getElementById('maintenanceForm');
            } else if (type === 'inventory') {
                data = inventoryData;
                form = document.getElementById('inventoryForm');
            }
            const item = data.find(item => item.id === id);
            if (item) {
                if (type === 'equipment') {
                    document.getElementById('equipmentName').value = item.name;
                    document.getElementById('equipmentPrice').value = item.price;
                } else if (type === 'borrow') {
                    document.getElementById('borrowerName').value = item.borrower;
                    document.getElementById('borrowedEquipment').value = item.equipment;
                } else if (type === 'maintenance') {
                    document.getElementById('maintenanceEquipment').value = item.equipment;
                    document.getElementById('maintenanceDate').value = item.date;
                } else if (type === 'inventory') {
                    document.getElementById('inventoryEquipment').value = item.equipment;
                    document.getElementById('inventoryQuantity').value = item.quantity;
                }
                const saveButton = document.createElement('button');
                saveButton.textContent = '保存';
                saveButton.onclick = () => {
                    if (type === 'equipment') {
                        item.name = document.getElementById('equipmentName').value;
                        item.price = parseInt(document.getElementById('equipmentPrice').value);
                    } else if (type === 'borrow') {
                        item.borrower = document.getElementById('borrowerName').value;
                        item.equipment = document.getElementById('borrowedEquipment').value;
                    } else if (type === 'maintenance') {
                        item.equipment = document.getElementById('maintenanceEquipment').value;
                        item.date = document.getElementById('maintenanceDate').value;
                    } else if (type === 'inventory') {
                        item.equipment = document.getElementById('inventoryEquipment').value;
                        item.quantity = parseInt(document.getElementById('inventoryQuantity').value);
                    }
                    localStorage.setItem(`${type}Data`, JSON.stringify(data));
                    renderTable(`${type}Table`, data, Object.keys(item), type);
                    form.removeChild(saveButton);
                    document.getElementById(`${type}Form`).reset();
                };
                form.appendChild(saveButton);
            }
        }

        // 删除项目
        function deleteItem(id, type) {
            let data;
            if (type === 'equipment') {
                data = equipmentData;
            } else if (type === 'borrow') {
                data = borrowData;
            } else if (type === 'maintenance') {
                data = maintenanceData;
            } else if (type === 'inventory') {
                data = inventoryData;
            }
            const index = data.findIndex(item => item.id === id);
            if (index !== -1) {
                data.splice(index, 1);
                localStorage.setItem(`${type}Data`, JSON.stringify(data));
                renderTable(`${type}Table`, data, Object.keys(data[0] || {}), type);
            }
        }

        // 绘制图表
        function drawChart() {
            const ctx = document.getElementById('chart').getContext('2d');
            const labels = inventoryData.map(item => item.equipment);
            const data = inventoryData.map(item => item.quantity);
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '器材库存数量',
                        data: data,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // 初始化显示首页
        showPage('home');
    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>